<template>
	<div>
		<el-dialog v-model="show" :title="title" :width="550" :before-close="close1">
			<div>
				<el-button type="primary" v-if="parentId != -1" plain size="small" icon="ArrowLeftBold"
					@click="openSuperiors"></el-button>
			</div>
			<div>
				<el-button type="primary" plain size="small" style="position: absolute;right: 100px;top: 84px;"
					@click="createCode">添加人员</el-button>
				<el-button type="primary" plain size="small" style="position: absolute;right: 20px;top: 84px;"
					@click="createOrganization">添加部门</el-button>
			</div>
			<div style="height: 60px;"></div>
			<el-table :data="organizationChlidrenList">
				<el-table-column type="index" width="50" />
				<el-table-column prop="title" label="部门名称"></el-table-column>
				<el-table-column label="">
					<template #default="scope">
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220">
					<template #default="scope">
						<el-button type="primary" plain size="small"
							@click="updateOrganizationName(scope.row.title,scope.row.id)">修改</el-button>
						<el-button type="primary" plain size="small" @click="getChildrenList(scope)">查看下级</el-button>
						<el-button type="danger" plain size="small" @click="deteleOrganizationById(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="height: 40px;"></div>

			<el-table :data="organizationDetailList">
				<el-table-column type="index" width="50" />
				<el-table-column prop="userName" label="员工名称"></el-table-column>
				<el-table-column label="类型">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.type == 1">管理员</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="220">
					<template #default="scope">
						<el-button type="primary" v-if="scope.row.type == 0" plain size="small"
							@click="setManage(scope.row.id,1)">设置管理员</el-button>
						<el-button type="primary" v-else plain size="small" @click="setManage(scope.row.id,0)">取消管理员</el-button>
						<el-button type="danger" plain size="small" @click="updateStatusById(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 添加或修改部门名称 -->
		<my-modal :title="modalTitle" ref="myModal" v-if="modalShow" @confirm="confirmSubmit"
			@closeModal="modalShow = $event"></my-modal>
		<create-qrcode v-if="imageShow" :content="organizationId" @close="imageShow = false"></create-qrcode>
	</div>


</template>

<script>
	import MyModal from '@/component/MyModal/MyModal.vue'
	import myMixin from '@/utils/myMixin.js'
	import {
		ElLoading
	} from 'element-plus'
	import CreateQrcode from '@/components/CreateQrcode.vue'
	import {
		ElNotification
	} from 'element-plus'
	var that;
	export default {
		mixins: [myMixin], //混入
		components: {
			CreateQrcode,
			MyModal
		},
		data() {
			return {
				id: '',
				show: true,
				parentId: '', //上级id
				organizationId: '', //当前部门id
				title: '', //部门名称
				modalShow: false,
				modalTitle: '添加部门',
				organizationChlidrenList: [], //机构下部门
				organizationDetailList: [], //机构下人员
				src: '',
				srcList: [], //图片
				imageShow: false,
			}
		},
		onLoad(option) {
			that = this;

			ElNotification({
				title: '通知',
				message: '选择部门名称,增加子部门.选择人员名称,设置为管理员协助管理',
			})

		},
		mounted() {
			that = this;
		},

		methods: {
			init() {
				that.getData();
			},
			close1() {
				this.$parent.deptShow = false;
			},
			//添加人员
			createCode() {
				this.imageShow = true;
			},
			//上级
			openSuperiors() {
				this.organizationId = this.parentId;
				this.getData();
			},
			//删除人员
			async updateStatusById(id) {
				//获取班级信息
				const res = await that.$asyncHttpConfig({
					url: "/organization/updateStatusById",
					data: {
						id: id
					}
				})

				that.getData();
			},
			//设置管理员
			async setManage(id, type) {
				const res = await that.$asyncHttpConfig({
					url: "/organization/updateTypeById",
					data: {
						id: id,
						types: type
					}
				})

				that.getData();
			},
			createOrganization() {
				that.modalTitle = '添加部门名称';
				that.id = '';
				that.modalShow = true;

			},
			async confirmSubmit(content) {
				let url = "/organization/save";
				let dataFrom = {
					unionid: that.$store.state.$userInfo.id,
					title: content,
					parentId: that.organizationId
				}

				if (that.id) {
					url = "/organization/updateById"
					dataFrom["id"] = that.id;
				}

				await that.$asyncHttpConfig({
					url: url,
					data: dataFrom
				})
				that.id = "";
				that.modalShow = false;
				that.getData();
			},
			async getData() {
				console.log("that.organizationId", that.organizationId);
				const res = await that.$asyncHttpConfig({
					url: '/organization/selectChildrenList',
					data: {
						id: that.organizationId
					}
				})

				that.organizationChlidrenList = res.organizationChlidrenList;
				that.organizationDetailList = res.organizationDetailList;
				let {
					title,
					parentId
				} = res.organization;
				this.title = title;
				this.parentId = parentId;

			},
			//删除机构
			async deteleOrganizationById(id) {
				await that.$asyncHttpConfig({
					url: "/organization/deteleById",
					data: {
						id: id
					}
				})

				that.getData();
			},
			updateOrganizationName(title, id) {
				that.modalTitle = '修改部门名称';
				that.id = id;
				that.modalShow = true;
				that.$nextTick(() => {
					that.$refs["myModal"].content = title;
				})
			},
			//查询子部门
			getChildrenList(scope) {
				let {
					id
				} = scope.row;

				this.organizationId = id;
				this.getData();
			},

		},
	}
</script>

<style>
	@import url('/src/assets/style/my-bgcolor.css');
</style>